<template>
    <el-form 
        label-position="left" 
        label-width="100px"
        :model="formData" 
        :rules="rules" 
        ref="ruleForm"
    >
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="上级地区名称">
                    <el-input v-model="formData.parentName" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="地区名称" prop="name">
                    <el-input placeholder="请输入" v-model="formData.name" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="地区编码" prop="code">
                    <el-input placeholder="请输入" v-model="formData.code" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<style lang="scss" scoped>
.calendar-single ::v-deep.el-icon-date:before {
    content: '' !important;
}
.calendar-single ::v-deep.el-input__suffix {
    width: 25px !important;
}
.calendar-single ::v-deep i:last-child {
    background: url('~@/assets/image/operation/calendar.svg') center center no-repeat !important;
    background-size: 18px 18px !important;
}
.calendar-single ::v-deep.el-range-separator {
    line-height: 28px !important;
}
.customSelectTree ::v-deep.el-select.el-tree-select-input.el-popover__reference {
    width: 100% !important;
}
</style>
<script>
    import { addRequest, updateRequest } from '@/api/regionMessage'
    export default {
        props: {
            title: String,
            rowData: Object,
            type: String,
        },
        data() {
            return {
                formData:{
                    id: this.$props.rowData?.id || null,
                    parentId: this.$props.rowData?.parentId || null,
                    parentName: this.$props.rowData?.parentName || '',
                    name:this.$props.rowData?.name || null,
                    code:this.$props.rowData?.code || null,
                },
                rules:{
                    name: [
                        { required: true, message: "请输入地区名称", trigger: "blur" }
                    ],
                    code: [
                        { required: true, message: "请选择地区编码", trigger: "blur" }
                    ],
                }
            }
        },
        created() {
            if (this.$props.type === 'ADD') {
                // this.formData.parentName =
                //     this.$props.rowData?.parentName + '/' + this.$props.rowData?.name
                this.formData.parentName =
                    this.$props.rowData.parentName ? this.$props.rowData.parentName + '/' + this.$props.rowData?.name : this.$props.rowData?.name
                this.formData.name = ''
                this.formData.code = ''
            }
            this.initSetModal()
        },
        mounted() {},
        methods:{
            initSetModal() {
                if (this.$props.rowData) {
                    this.$emit("SetTitle", "编辑");
                } else {
                    this.$emit("SetTitle", "新增");
                }
                this.$emit("SetPageWidth", 600);
                this.$emit("SetPageActions", [
                    {
                        text: "取消",
                        theme: "info",
                        handle: () => {
                            this.$emit("Close");
                        }
                    },
                    {
                        text: "保存",
                        theme: "primary",
                        handle: () => {
                            this.submitForm();
                        },
                        loading: false
                    }
                ]);
            },
            submitForm() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                    //验证成功,发送请求
                    if (this.$props.rowData) {
                            //编辑更新
                            if (this.$props.type === 'EDIT') {
                                this.sendUpdateRequestFun()
                            }
                            //新增子节点
                            if (this.$props.type === 'ADD') {
                                this.sendAddRequestFun()
                            }
                        } else {
                            //新增父节点
                            this.sendAddRequestFun()
                        }
                    } else {
                    //验证失败
                    }
                });
            },
            sendAddRequestFun() {
                let { id, parentId, name, code } = {
                    ...this.formData,
                }
                if (this.$props.type === 'ADD') {
                    parentId = id
                } else {
                    parentId = null
                }
                const params = {
                    name,
                    code,
                    parentId,
                }
                addRequest(params).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
            sendUpdateRequestFun() {
                const params = {
                    ...this.formData,
                    id: this.$props.rowData?.id
                }
                updateRequest(params).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
        }
    }
</script>
